﻿<h2>Appointments List</h2>

<a href="#/appointments/current" class="k-button btn-appointments">View Current Appointments</a>
<a href="#/appointments/today" class="k-button btn-appointments">View Todays Appointments</a>
<a href="#/appointments/upcomming" class="k-button btn-appointments">View Upcomming Appointments</a>
<a href="#/appointments/all" class="k-button btn-appointments">View All Appointments</a>


<div id="app-by-date">
    <fieldset>
        <legend>
            <label for="tb-app-date">Appointment Date:</label>
            <input type="date" id="tb-app-date" class="k-textbox" value="Appointment Date" />
        </legend>
        <a href="#/appointments/byDate" class="k-button btn-appointments">View Appointments by date</a>
    </fieldset>
     
</div>

<div data-role="grid" data-draggable="true" data-selectable="row" data-sortable="true" data-groupable="true" data-pageable="{pageSize:'5',refresh:true, pageSizes:true}" data-columns='[
    {
        field: "id",
        hidden:"true"
    },
    {
        title: "Subject",
        field: "subject"
    }, 
    {
        title: "Description",
        field: "description"
    }, 
    {
        title: "Appointment Date",
        field: "appointmentDate"
    }, 
    {
        title: "Creation Date",
        field: "createdAt"
    }, 
    {
        title: "Duration",
        field: "duration"
    }
    
    ]'
    data-bind="source: appointments">
</div>

<a href="#/appointments/create" id="btn-create-appointment" class="k-button">Create Appointment</a>
